<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<!--<link href="../css/mui.imageviewer.css" rel="stylesheet" />-->
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				background-color: #f9f1f2;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding-right: 80px;
				padding-left: 10px;
				background-color: #f9f1f2;
			}
			
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			
			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}
			
			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}
			
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 8px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			
			.footer-center .input-sound {
				background-color: #eee;
			}
			
			.cancel {
				background-color: darkred;
			}
			
			.msg_item {
				width: 100%;
				/*border: 1px solid black;*/
				margin: 10px 0px !important;
				box-sizing: content-box;
			}
			
			.msg_item:after {
				content: '';
				display: block;
				clear: both;
			}
			
			.msg_item_left>.msg_avatar,
			.msg_item_left>.msg_content {
				float: left;
				vertical-align: middle;
			}
			
			.msg_item_right>.msg_avatar,
			.msg_item_right>.msg_content {
				float: right;
			}
			
			.msg_item_left>.msg_avatar {
				width: 35px;
				height: 35px;
				padding: 12px;
				padding-right: 10px;
				box-sizing: content-box;
			}
			
			.msg_item_right>.msg_avatar {
				width: 35px;
				height: 35px;
				padding: 5px;
				padding-left: 10px;
				box-sizing: content-box;
				/*border-radius: 50%;*/
			}
			
			.msg_avatar>img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			/*2683F5*/
			
			.msg_content {
				/*width: 200px;*/
				max-width: 70%;
				/*border: 1px solid #FFFFFF;*/
				border-radius: 8px;
				position: relative;
				color: #000000!important;
				background-color: #FFFFFF;
				padding: 8px 10px;
				box-sizing: border-box;
			}
			
			.msg_item_right>.msg_content {
				background-color: #17ABE3;
			}
			
			.msg_item_right>.msg_content>p {
				color: #FFFFFF !important;
			}
			
			.msg_item>.msg_content:before {
				content: '';
				display: block;
				width: 16px;
				height: 16px;
				/*border-radius: 20%;*/
				box-sizing: border-box;
				border-bottom: 8px solid transparent;
				border-top: 8px solid transparent;
				border-left: 8px solid transparent;
				border-right: 8px solid #FFFFFF;
				position: absolute;
				right: 100%;
				top: 8px;
			}
			
			.msg_item_left>.msg_content:before {
				border-left: 8px solid transparent;
				border-right: 8px solid #FFFFFF;
				right: 100%;
			}
			
			.msg_item_right>.msg_content:before {
				border-left: 8px solid #17ABE3;
				/*#82E2F5,17ABE3*/
				border-right: 8px solid transparent;
				left: 100%;
			}
			
			.msg_content>p {
				/*border: 1px solid blue;*/
				word-break: break-all;
				color: #000000!important;
				margin: 0px 0px !important;
			}
			
			.mui-scroll-wrapper {
				margin-bottom: 55px;
				margin-top: 45px;
			}
			#send{
				/*line-height: 50px;*/
				margin-bottom: 2px;
			}
			#send>.send {
				/*vertical-align: middle !important;*/
				/*line-height: 27px;*/
				/*vertical-align: ;*/
			}
			.header>.mui-icon-arrowleft{
				font-size: 30px;
				line-height: 40px;
				position: absolute;
				z-index: 22;
			}
		</style>
	</head>

	<body>

		<div class="header">
			<i class="backup mui-icon mui-icon-arrowleft mui-pull-left"></i>
			<!--<p class="mui-col-sm-12 mui-col-xs-12 ">发布</p>-->
			<h1 class="mui-title">聊天室</h1>
		</div>

		<div class="mui-scroll-wrapper">
			<div class="mui-scroll" id="scroll1">
				<div id="msg_box">

					<div id="msg-list">
					</div>
				</div>
			</div>
		</div>

		<div id="">
		</div>
		<footer>

			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right" id="send">
				<!--发送-->
				<a href="#" class="send mui-btn mui-btn-primary mui-pull-right">发送</a>
			</label>
		</footer>
		<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<!--<div class="r-sigh">!</div>-->
			<!--<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>-->
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/ip.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/arttmpl.js"></script>
		<script src="../js/chat.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>